<template>
  <div class="all">
    <div class="add-nav">
      注册时间:
    <el-date-picker
      v-model="time1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd 00:00:00">
    </el-date-picker>
    <el-input type="text" value="" placeholder="请输入用户ID或者用户名" v-model="condition.idOrName"/>  </el-input>

<!--    是否签约:<el-select v-model="condition.sign" placeholder="请选择">
          <el-option
            label="已签约"
            value="1">
          </el-option>
          <el-option
            label="未签约"
            value="0">
          </el-option>
      </el-select>
      是否注销:<el-select v-model="condition.cancelled" placeholder="请选择">
            <el-option
              label="是"
              value="1">
            </el-option>
            <el-option
              label="否"
              value="0">
            </el-option>
        </el-select> -->
        <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
       <!-- <button @click="search()">搜索</button> -->
    </div>
<div style="margin-top: 10px;">
  <el-table :data="list" :header-cell-style="{background:'#eef3f7'}" >
    <el-table-column align="center"
    label="头像"
    >
   <template slot-scope="scope">
    <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.imgUrl"></el-avatar>
   </template>
    </el-table-column>
    <el-table-column align="center" prop="userName" label="用户名"></el-table-column>
    <el-table-column align="center" prop="nickName" label="昵称"></el-table-column>
    <el-table-column align="center" width="80" prop="city" label="所在地"></el-table-column>
    <el-table-column align="center" width="50" prop="age" label="年龄"></el-table-column>
    <el-table-column align="center" width="50" prop="sex" label="性别"></el-table-column>
    <el-table-column align="center" prop="earnBean" label="金币"></el-table-column>
    <el-table-column align="center" prop="regTime" label="注册时间"></el-table-column>
    <el-table-column align="center" label="状态">
      <template slot-scope="scope">
        <i v-if="scope.row.sign==0">未签约</i>
        <i v-else>已签约</i>
      </template>
    </el-table-column>
    <el-table-column align="center" label="管理操作">
      <template slot-scope="scope" style="display: flex;">
        <el-button plain size="mini" type="danger" v-if="scope.row.cancelled==0" @click="forbidden(scope.row)">注销</el-button>
        <el-button  v-else @click="renew(scope.row)" size="mini"  type="success">恢复</el-button>
        <el-button type="primary" plain size="mini" @click="addshow(scope.row)">手动加值</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <table width="100%" class="userAll" cellspacing="0">
    <thead>
      <tr>
        <th>头像</th>
        <th>用户名</th>
        <th>昵称</th>
        <th>所在地</th>
        <th>年龄</th>
        <th>性别</th>
        <th>金币</th>
        <th>注册时间</th>
        <th>状态</th>
        <th>管理操作</th>
      </tr>
    </thead>
      <tbody>
        <tr v-for="(val,name) in list">
          <td>  <el-avatar shape="square" :size="100" fit="fill" :src="val.imgUrl"></el-avatar></td>
          <td>{{val.userName}}</td>
          <td>{{val.nickName}}</td>
          <td>{{val.city}}</td>
          <td>{{val.age}}</td>
          <td>{{val.sex}}</td>
          <td>{{val.earnBean}}</td>
          <td>{{val.regTime}}</td>
          <td v-if="val.sign==0">未签约</td>
          <td v-else>已签约</td>
          <td>
            <el-button plain size="mini" type="danger" v-if="val.cancelled==0" @click="forbidden(val)">注销</el-button>
            <el-button  v-else @click="renew(val)" size="mini"  type="success">恢复</el-button>
             <el-button type="primary" plain size="mini" @click="addshow(val)">手动加值</el-button>
                  </td>
        </tr>
      </tbody>
      </table> -->
</div>
    <div class="Page">
          <el-pagination
          background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>

    </div>
<!--    <Popup v-show="popup" @cancel='cancel' :date="date">
    </Popup> -->

        <div class="manual" v-show="show">
          <h3>手动加值<i class="el-icon-circle-close" @click="cancel()"></i></h3>
          <table>
            <tr>
              <th>用户名:</th>
              <td><el-input readonly v-model="add.name"></el-input></td>
            </tr>
            <tr>
              <th>加/减值额</th>
              <td><el-input type="number" v-model="add.select"></el-input></td>
            </tr>
          </table>
          <el-button type="primary" round @click="subim()">提交</el-button>
        </div>
  </div>
</template>


<script>
  import {cancelled} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
    inject:["reload"],
    data(){
      return{
        show:false,
        time1: [],
        condition:{
          quantity:10,
          pageIndex:1,
          pageSize:10,
        },
        add:[],
        popup:false,
        date:'',
        list:[],
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        }
        },
    methods:{
      //禁用
      forbidden(val){
        var _this=this
           this.$confirm('此操作将注销'+val.nickName+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			cancelled(val,this.admin).then(res=>{
        console.log(res)
				if(res.code==0){
            _this.reload()
					this.$message({
					  type: 'success',
					  message: '禁用成功!'
					});
				}
			})


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //恢复
      renew(val){
        var _this=this
           this.$confirm('此操作将恢复'+val.nickName+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.Postdata('/admin/user/recover',val)
          this.$message({
            type: 'success',
            message: '恢复成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //搜索
      search(){
        this.condition.fromRegTime=this.time1[0]
        this.condition.toRegTime=this.time1[1]
        console.log(this.condition)
         this.Postdata('/admin/user/get',this.condition)
      },
      handleSizeChange(val) {
        this.condition.pageSize=val
        this.Postdata('/admin/user/get',this.condition)
        console.log(`每页 ${val} 条`);
      },
       handleCurrentChange(val) {
         this.condition.pageIndex=val
        this.Postdata('/admin/user/get',this.condition)
      },
      Postdata(url,e){
              var _this=this
              this.$axios
              .post('/api'+url, {
                 adminName:_this.$cookies.get('adminName'),
                 token:_this.$cookies.get('token'),
                 fromRegTime:e.fromRegTime,
                 toRegTime:e.toRegTime,
                 idOrName:e.idOrName,
                 sign:e.sign,
                 liveStatus:e.liveStatus,
                 cancelled:e.cancelled,
                 pageIndex:e.pageIndex,
                 pageSize:e.pageSize,
                 userId:e.userId
                },)
          .then(function(response){
                  if(response.data.code==0){
                    if(response.data.data==null){
                      _this.$alert("操作成功", '提示', {
                             confirmButtonText: '确定',
                             callback: action => {
                               //刷新
                               _this.reload()
                             }
                           });
                    }else{
                      _this.condition.quantity=response.data.data.sum
                      _this.list=response.data.data.members
                    }

                  }else{
                    if(response.data.code==3001){
                      _this.$alert('查无此人', '提示', {
                         confirmButtonText: '确定',
                         callback: action => {
                           _this.reload()
                         }
                       });
                    }else{
                      _this.$alert('查询失败', '提示', {
                         confirmButtonText: '确定',
                         callback: action => {
                         }
                       });
                    }
                  }
                   console.log(response)
                 })
                 .catch(function(error){
                   console.log(error)
                 })
      },
        closes(e){
          this.popup=true
          this.date=e
          console.log(this.popup)
        },
        cancel(){
          this.popup=false
            this.show=false
           Object.assign(this.$data.add, this.$options.data().add)
           console.log(this.date)

        },
        addshow(e){
          this.show=true
          this.add.name=e.userName
        },
        subim(){
        let e=[]
        console.log(this.add)
          e.coin=Number(this.add.select)
          e.userName=this.add.name
          console.log(e)
        var _this=this
        this.$axios({
          method: "POST",
          url: '/api/admin/user/coin/add',
          headers: {'Content-Type': 'application/json'},
          data: {
                    adminName:_this.$cookies.get('adminName'),
                    token:_this.$cookies.get('token'),
                    userName:e.userName,
                    coin:e.coin
                },
        }).then(res=>{
          console.log(res)
            if(res.data.code==0){
              _this.$alert('操作成功', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                    _this.reload()
                 }
               });
            }else{
              _this.$alert('操作失败', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                    _this.reload()
                 }
               });
            }
        })

          },

},
mounted(){
    this.Postdata('/admin/user/get',this.condition)
// const ip = localStorage.getItem('Ip')
//  console.info(ip)

}
        }
</script>

<style lang="scss" scoped src = "../../css/users.css">

</style>
